<template>
  <div class="container">
    <div class="header">
      <span class="Data_font">训练数据集</span>
      <div class="header-right">
        <el-dropdown>
          <span class="user_icon">
            <img src="../../../../assets/images/user-icon.png" />
          </span>
          <el-dropdown-menu
            @click.native="handleUserSetting('loginout')"
            style="font-size: 12px; padding: 0.625rem 1.25rem; cursor: pointer"
          >
            退出登录
          </el-dropdown-menu>
        </el-dropdown>
        <alarm-icon></alarm-icon>
      </div>
    </div>
    <div class="main eventMain">
      <div class="main-header">
        <div class="btn_setion">
          <el-button type="primary" plain @click="createData"
            >创建数据集</el-button
          >
        </div>
        <div class="ipt_section">
          <el-input placeholder="请输入名称搜索" v-model="tableDataName"  class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="doFilter"></el-button>
          </el-input>
          <div
            class="setting-icon el-icon-refresh-left"
            @click="getTableData"
          ></div>
        </div>
      </div>
      <!-- 表格区域 -->
      <el-table
        tooltip-effect="dark"
        :header-cell-style="{
          color: '#131416',
          fontsize: '0.875rem',
          fontWeight: 'Bold',
          fontFamily: 'Microsoft YaHei, Microsoft YaHei-Bold',
          backgroundColor: '#F8F8F8',
          height: '2.5rem',
        }"
        :row-style="{ height: '3.375rem' }"
        :cell-style="{}"
        border
        :data="tableList"
        style="
          margin-top: 2.5rem;
          margin-bottom: 1.875rem;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
        "
        v-loading="loading"
      >
        <el-table-column
          prop="dataset_name"
          label="数据集名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="annotated_sample_count,total_sample_count"
          label="标注进度（已标注个数/总数）"
          show-overflow-tooltip
        >
         <template slot-scope="scope">
            {{scope.row.annotated_sample_count}}/{{scope.row.total_sample_count}} 
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.create_time | dataFormat("YYYY/MM/DD HH:mm:ss")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="revise(scope.row, (dialogFormVisible = true))"
              type="text"
              size="small"
              class="buttonLine"
            >
              修改
            </el-button>
            <el-button
              @click="deleteDataset(scope.row)"
              type="text"
              size="small"
              class="buttonLine"
            >
              删除
            </el-button>
            <el-button
              @click="smartLabeling(scope.row)"
              type="text"
              size="small"
              class="buttonLine"
            >
              智能标注
            </el-button>
            <el-button
              @click="jumpLink"
              type="text"
              size="small"
              class="buttonLine"
            >
              手动标注
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 150, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        v-if="totalCount > 0"
      >
      </el-pagination>
    </div>
    <!-- 修改数据集弹框 -->
    <el-dialog
      title="修改数据集"
      :visible.sync="dialogFormVisible"
      width="28%"
      center
    >
      <el-form>
        <el-form-item label="名称">
          <el-input v-model="inputvalue" type="text"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="inputvalue1" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            reviseDataset();
          "
          >确 定</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import alarmIcon from '../../../../components/alarmIconComponent/alarmIconComponent.vue';
export default {
  components: {
    alarmIcon,
  },
  data() {
    return {
      ids: '',
      tableList: [],
      // 默认每页数据量
      pageSize: 10,
      // 当前页码
      currentPage: 1,
      // 默认数据总数,表格的分页
      totalCount: 0,
      pkArchivingStore: '',
      dialogFormVisible: false,
      standardRadio: false,
      lowerRadio: false,
      fileRadio: false,
      loading: false,
      content: [],
      index: null,
      inputvalue: '',
      inputvalue1: '',
      inputid: '',
      tableDataName: '',
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 获取表格数据
    getTableData() {
      this.loading = true;
      this.$url
        .get(
          `data/train/dataset?page=${this.currentPage}&page_size=${this.pageSize}`
        )
        .then((res) => {
          if (res.status === 200) {
            this.tableList = res.data.data.data_list;
            this.totalCount = res.data.data.count;
            this.trainSearchOptions.forEach((g, index) => {
              let obj = {};
              g.options = g.options.reduce((newArr, m) => {
                obj[m.label] ? '' : (obj[m.label] = true && newArr.push(m));
                return newArr;
              }, []);
              return g.options;
            });
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 创建数据集
    createData() {
      this.$router.push({
        path: '/CreateDataset',
      });
    },
    // 搜索事件
    doFilter(){
      let params = {
        page: this.currentPage,
        pageSize: this.pageSize, 
        'dataset_name':this.tableDataName
      };
      this.$url.get('data/train/dataset', { params }).then(res => {
        if (res.status === 200) {
          this.tableList = res.data.data.data_list;
          this.totalCount = res.data.data.count;
        }
      });
    },
    // 获取点击的行数
    revise(list) {
      this.inputvalue = list.dataset_name;
      this.inputvalue1 = list.description;
      this.inputid = list.dataset_id;
    },
    // 数据集修改
    reviseDataset() {
      this.$url
        .put('data/train/dataset', {
          'dataset_id': this.inputid,
          'dataset_name': this.inputvalue,
          'description': this.inputvalue1,
        })
        .then((res) => {
          if (res.status === 200) {
            this.$message.success('修改成功');
            this.getTableData();
          } else {
            this.$message.error('修改失败');
          }
        });
    },
    // 数据集删除
    deleteDataset(pk) {
      this.$confirm('确定删除此数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$url
            .delete('data/train/dataset', {
              data:{'dataset_id':pk.dataset_id}
            })
            .then((res) => {
              if (res.status === 204) {
                this.$message.success('删除数据成功');
                this.getTableData();
              } else {
                this.$message.error('删除失败');
              }
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 智能标注
    smartLabeling(pk){
        this.$url.post('data/train/annotate',{     
            'dataset_id':pk.dataset_id,
            'annotate_type':'auto'         
        })
        .then(res=>{
		   	   	if (res.status === 200) {
                    this.$message.success('标注成功')
                } else {
                    this.$message.error('标注失败')
                }
		   	})
    },
    // 手动标注
    jumpLink(){
      window.open('https://console.huaweicloud.com/modelarts/?region=cn-north-4#/dataset','_blank')
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 退出登录
    handleUserSetting(command) {
      if (command === 'loginout') {
        this.$url.post('logout').then((res) => {
          if (res.status === 200) {
            this.$message.success('退出成功');
            this.$router.push({ path: '/Login' });
            this.$stor.del('X-CSRFToken');
          }
        });
      }
    },
  },
};
</script>

<style
  lang="less"
  src='../../../../assets/css/anonymizeDataPageStyle.less'
></style>
<style lang="less" scoped>
/deep/.el-dialog__header {
  padding: 20px 0px 20px 20px;
}
/deep/.el-form-item__content {
    display: flex;
}
/deep/.el-dialog--center {
    text-align: left;
}
.dialog-footer {
  display: flex;
  padding: 0 200px 16px 120px;
  .el-button {
    margin-left: 40px;
    width: 100px;
    height: 40px;
    line-height: 10px;
  }
}
.ipt_section{
  width: 480px;
  height: 30px;
  display: flex;
  .rightSearch{
    position: relative;
    left: -30px;
    top: 5px;
  }
  .setting-icon{
    width: 35px!important;
    height: 35px!important;
  }
}
</style>
